<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div id="result"></div>

    <script>

        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function(){
            //1 创建对象
            const xhr = new XMLHttpRequest();

            xhr.timeout = 2000;

            xhr.ontimeout = function(){
                alert('网络异常,请稍后重试');
            }


            xhr.onerror = function(){
                alert('你的网络出现了一点小问题');
            }
            //2 初始化
            xhr.open('GET','http://localhost:8000/delay');//？分格 & 为多个
            //3 发送
            xhr.send();
            //4 时间绑定 ，处理服务器返回的结果
            //readystate 是xhr对象中的属性，表示状态0未初始化 1open已经调用 2send方法调用完毕 3返回部分数据 4返回全部数据
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    //判断响应状态码
                    if(xhr.status >= 200 && xhr.status<300){
                        // //处理结果 行 头 空行 体
                        // //1 相应行
                        // console.log(xhr.status);//响应状态码
                        // console.log(xhr.statusText);//想要字符串
                        // console.log(xhr.getAllResponseHeaders);//所有响应体
                        // //体
                        // console.log(xhr.response)


                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else{

                    }

                }
            }
        }
    </script>
</body>
</html>